<template>
  <div class="app">
    <!-- <type-check v-model="str" ref="typ"></type-check> -->
    <button @click="who = 'TypeCheckA'">touch me</button>
    <button @click="who = 'TypeCheckB'">touch me</button>
    <button @click="who = 'TypeCheckC'">touch me</button>

    <component :is="who"></component>
    <!-- <input ref="inp" type="text" v-if="show"> -->
    <!-- <div ref="hnum">{{num}}</div> -->
    <!-- <type-check></type-check>
   <type-check></type-check> -->
  </div>
</template>

<script>
import TypeCheckA from "./components/TypeCheck";
import TypeCheckB from "./components/TypeCheck copy";
import TypeCheckC from "./components/TypeCheck copy 2";

export default {
  name: "App",
  data() {
    return {
      str: "100",
      num: 100,
      show: false,
      who: "TypeCheckA",
    };
  },
  methods: {
    // focus() {
    //   // this.num++
    //   // console.log(this.$refs.hnum)
    //   this.show = true;
    //   // this.$refs.inp.focus()

    //   this.$nextTick(() => {
    //     // console.log(this.$refs.hnum.innerHTML)
    //     this.$refs.inp.focus();
    //   });
    // },
  },

  computed: {},

  components: {
    TypeCheckA,
    TypeCheckB,
    TypeCheckC,
  },
};
</script>

<style >
</style>